Hi,
I’ve already successfully built a Cesium app using webpack as outlined inthe following Cesium tutorial: This tutorial explains how to integrate the Cesium npm module from webpack, and explores more advanced webpack configurations for optimizing an application using CesiumJS. – Cesium
I’m now trying to create a similar app using Vue.js. Currently I’m unable to get the Vue.js app to run or build due to the following error:
ERROR ReferenceError: path is not defined
ReferenceError: path is not defined
at Object.<anonymous> (C:\Users\virt\Documents\GitHub_Repositories\Websites\Vue_Cesium_Client\vue_cesium_client\vue.config.js:19:11)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Function.Module._load (node:internal/modules/cjs/loader:822:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at exports.loadModule (C:\Users\virt\Documents\GitHub_Repositories\Websites\Vue_Cesium_Client\vue_cesium_client\node_modules\@vue\cli-shared-utils\lib\module.js:86:14)
at loadFileConfig (C:\Users\virt\Documents\GitHub_Repositories\Websites\Vue_Cesium_Client\vue_cesium_client\node_modules\@vue\cli-service\lib\util\loadFileConfig.js:30:20)
at Service.loadUserOptions (C:\Users\virt\Documents\GitHub_Repositories\Websites\Vue_Cesium_Client\vue_cesium_client\node_modules\@vue\cli-service\lib\Service.js:339:44)
PS C:\Users\virt\Documents\GitHub_Repositories\Websites\Vue_Cesium_Client\vue_cesium_client>
Steps to recreate:
- Install Node.js
- Use NPM to insall the VUE CLI:
npm install -g @vue/cli
- Create a directory for the project.
- Navigate to the project folder.
- Create the Vue project:
vue create <project name>
- Select option ‘Manually select features’.
- Select ‘Babel’ and deselect ‘Linter/Formatter’ by pressing
Space Barand thenReturn. - Select Vue ‘3.x’.
- Select to place Babel ‘In dedicated config files’.
- Enter ‘N’ when prompted to save preset for future projects.
- Open the project folder in your preferred IDE (e.g.
code .for VSCode from the command line). - Navigate to the newly created app folder:
cd <project_name>
- Install the Cesium module from npm and add it to package.json:
npm install --save-dev cesium
- Test the build command
npm run build
- Run the development server:
npm run serve
- Add the following to the top of vue.config.js:
const { defineConfig } = require("@vue/cli-service");
// The path to the CesiumJS source code
const cesiumSource = 'node_modules/cesium/Source';
const cesiumWorkers = '../Build/Cesium/Workers';
- Update the
module.exportssection in vue.config.js as follows:
module.exports = defineConfig({
transpileDependencies: true,
context: __dirname,
entry: {
app: "./src/main.js",
},
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
},
// Add module rules for loading CSS and other files
module: {
rules: [
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(png|gif|jpg|jpeg|svg|xml|json)$/,
use: ["url-loader"],
},
],
},
// Address Webpack compilation issues of Cesium
output: {
filename: "[name].js",
path: path.resolve(__dirname, "dist"),
// Needed to compile multiline strings in Cesium
sourcePrefix: "",
},
amd: {
// Enable webpack-friendly use of require in Cesium
toUrlUndefined: true,
},
// Add a Cesium alias that can be referenced in app code
resolve: {
alias: {
// CesiumJS module name
cesium: path.resolve(__dirname, cesiumSource),
},
},
plugins: [
new HtmlWebpackPlugin({
template: "src/index.html",
}),
// Copy Cesium Assets, Widgets, and Workers to a static directory
new CopywebpackPlugin({
patterns: [
{ from: path.join(cesiumSource, cesiumWorkers), to: "Workers" },
{ from: path.join(cesiumSource, "Assets"), to: "Assets" },
{ from: path.join(cesiumSource, "Widgets"), to: "Widgets" },
],
}),
new webpack.DefinePlugin({
// Define relative base path in Cesium for loading assets
CESIUM_BASE_URL: JSON.stringify(""),
}),
new Dotenv(),
],
});
- Rerun the development server:
npm run serve.
My assumption is that the vue.config.js file should accept the webpack configuration but I’m unsure how to implement this properly. Vue provide the following guidance ( Working with Webpack | Vue CLI ) but I’m unclear how that applies in this instance. Any advice appreciated.
).
