|
@@ -1,5 +1,136 @@
|
|
|
# vue-cli
|
|
|
|
|
|
+## 案例
|
|
|
+
|
|
|
+```js
|
|
|
+const path = require('path');
|
|
|
+function resolve(dir) {
|
|
|
+ return path.join(__dirname, dir);
|
|
|
+}
|
|
|
+const targetUrl = '[地址]';
|
|
|
+module.exports = {
|
|
|
+ // Project deployment base
|
|
|
+ // By default we assume your app will be deployed at the root of a domain,
|
|
|
+ // e.g. https://www.my-app.com/
|
|
|
+ // If your app is deployed at a sub-path, you will need to specify that
|
|
|
+ // sub-path here. For example, if your app is deployed at
|
|
|
+ // https://www.foobar.com/my-app/
|
|
|
+ // then change this to '/my-app/'
|
|
|
+ // baseUrl: '/web/app/img/',
|
|
|
+ baseUrl: '/',
|
|
|
+
|
|
|
+ // where to output built files
|
|
|
+ outputDir: 'dist',
|
|
|
+
|
|
|
+ // whether to use eslint-loader for lint on save.
|
|
|
+ // valid values: true | false | 'error'
|
|
|
+ // when set to 'error', lint errors will cause compilation to fail.
|
|
|
+ lintOnSave: true,
|
|
|
+
|
|
|
+ // use the full build with in-browser compiler?
|
|
|
+ // https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
|
|
|
+ // compiler: false,
|
|
|
+
|
|
|
+ // tweak internal webpack configuration.
|
|
|
+ // see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
|
|
|
+ chainWebpack: config => {
|
|
|
+ config.resolve.alias
|
|
|
+ .set('@$', resolve('src'))
|
|
|
+ .set('common', resolve('src/common'))
|
|
|
+ .set('components', resolve('src/components'))
|
|
|
+ .set('page', resolve('src/page'))
|
|
|
+ .set('config', resolve('src/config'))
|
|
|
+ .set('layout', resolve('src/layout'))
|
|
|
+ .set('base', resolve('src/base'))
|
|
|
+ .set('static', resolve('src/static'));
|
|
|
+ config.module
|
|
|
+ .rule('pug')
|
|
|
+ .test(/\.pug$/)
|
|
|
+ .use('pug-html-loader')
|
|
|
+ .loader('pug-html-loader')
|
|
|
+ .end();
|
|
|
+ },
|
|
|
+ configureWebpack: () => {},
|
|
|
+
|
|
|
+ // vue-loader options
|
|
|
+ // https://vue-loader.vuejs.org/en/options.html
|
|
|
+ // vueLoader: {},
|
|
|
+
|
|
|
+ // generate sourceMap for production build?
|
|
|
+ productionSourceMap: true,
|
|
|
+
|
|
|
+ // CSS related options
|
|
|
+ css: {
|
|
|
+ // extract CSS in components into a single CSS file (only in production)
|
|
|
+ extract: true,
|
|
|
+
|
|
|
+ // enable CSS source maps?
|
|
|
+ sourceMap: false,
|
|
|
+
|
|
|
+ // pass custom options to pre-processor loaders. e.g. to pass options to
|
|
|
+ // sass-loader, use { sass: { ... } }
|
|
|
+ loaderOptions: {},
|
|
|
+
|
|
|
+ // Enable CSS modules for all css / pre-processor files.
|
|
|
+ // This option does not affect *.vue files.
|
|
|
+ modules: false,
|
|
|
+ },
|
|
|
+
|
|
|
+ // use thread-loader for babel & TS in production build
|
|
|
+ // enabled by default if the machine has more than 1 cores
|
|
|
+ parallel: require('os').cpus().length > 1,
|
|
|
+
|
|
|
+ // split vendors using autoDLLPlugin?
|
|
|
+ // can also be an explicit Array of dependencies to include in the DLL chunk.
|
|
|
+ // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
|
|
|
+ // dll: false,
|
|
|
+
|
|
|
+ // options for the PWA plugin.
|
|
|
+ // see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
|
|
|
+ // pwa: {},
|
|
|
+
|
|
|
+ // configure webpack-dev-server behavior
|
|
|
+ devServer: {
|
|
|
+ open: process.platform === 'darwin',
|
|
|
+ host: '0.0.0.0',
|
|
|
+ port: 8080,
|
|
|
+ https: false,
|
|
|
+ hotOnly: false,
|
|
|
+ // See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#configuring-proxy
|
|
|
+ proxy: {
|
|
|
+ '/j': {
|
|
|
+ target: `${targetUrl}/j`, //设置调用接口域名和端口号别忘了加http
|
|
|
+ changeOrigin: true,
|
|
|
+ pathRewrite: {
|
|
|
+ '^/j': '/', //这里理解成用‘/api’代替target里面的地址,组件中我们调接口时直接用/api代替
|
|
|
+ // 比如我要调用'http://0.0:300/user/add',直接写‘/api/user/add’即可 代理后地址栏显示/
|
|
|
+ },
|
|
|
+ },
|
|
|
+ '/o2o': {
|
|
|
+ target: `${targetUrl}/o2o`,
|
|
|
+ changeOrigin: true,
|
|
|
+ pathRewrite: {
|
|
|
+ '^/o2o': '/',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ '/moonclub': {
|
|
|
+ target: `${targetUrl}/moonclub`,
|
|
|
+ changeOrigin: true,
|
|
|
+ pathRewrite: {
|
|
|
+ '^/moonclub': '/',
|
|
|
+ },
|
|
|
+ },
|
|
|
+ }, // string | Object
|
|
|
+ before: app => {},
|
|
|
+ },
|
|
|
+
|
|
|
+ // options for 3rd party plugins
|
|
|
+ pluginOptions: {
|
|
|
+ // ...
|
|
|
+ },
|
|
|
+};
|
|
|
+```
|
|
|
+
|
|
|
## 配置
|
|
|
|
|
|
可参照下面链接中的文章进行配置<br/>
|
|
@@ -41,11 +172,11 @@ vue.config.js
|
|
|
```js
|
|
|
const path = require('path');
|
|
|
module.exports = {
|
|
|
- chainWebpack: (config) => {
|
|
|
+ chainWebpack: config => {
|
|
|
config.module
|
|
|
.rule('vue')
|
|
|
.use('vue-loader')
|
|
|
- .tap((options) => {
|
|
|
+ .tap(options => {
|
|
|
options.loaders.stylus = options.loaders.stylus.concat({
|
|
|
loader: 'stylus-resources-loader',
|
|
|
options: {
|